
import React from 'react';
import PropTypes from 'prop-types';
import {injectIntl, language} from './intl';
import {Card, Row, Col, Table, Divider, Button} from 'antd';
import {TABLE, DATETIME_FORMAT, FILES_API} from '../constants';
import {formatDateTime, conventEnumValueToString, formatAmount, onDownloadHistory, formatPercent} from '../utils';
import {currency} from '../Enum';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
const {Description} = DescriptionList;
import styles from './style.css';
import Ellipsis from 'ant-design-pro/lib/Ellipsis';
import {computeSelectedRows} from './utils';
import {getDetailRepeat} from './api';

class Detail extends React.PureComponent {
    state = {
        selectedRowKeys: [],
        isRepeat: false
    };
    // setRowClassName() {
    //     // const row = selectedRowKeys.some(v => v === record.id);
    //     // if(row)
    //     //     return styles.rowStyle;
    //     return styles.rowStyle;
    // }
    onClickRepeatBtn = () => {
        this.setState({
            isFetching: true,
            isRepeat: true
        });
        getDetailRepeat(this.props.detail.id)
            .then(res => {
                if(res.ok)
                    this.setState({
                        isFetching: false,
                        details: res.data,
                    });
                else
                    this.setState(({
                        isFetching: false,
                        isRepeat: false
                    }));
            });
    }
    onClickReductionBtn = () => {
        this.setState({
            isRepeat: false
        });
    }
    onClickDownload = e => {
        const {id, applyid} = e.target.dataset;
        onDownloadHistory({
            filePath: id,
            fileName: applyid
        });
    }
    render() {
        const languageIntl = language;
        const {selectedRowKeys} = this.state;
        const {details = [], attachments = []} = this.props.detail;
        const newdetails = this.state.isRepeat ? this.state.details : details;
        const fileList = attachments.map(item => (<Description key={item.fileId}>
            {item.filePath ? <a onClick={this.onClickDownload} key={item.fileId} data-id={item.filePath} data-applyid={item.fileName}>
                {item.fileName}</a> : <a icon="download" href={`${FILES_API.files}/${item.fileId}`} size="small">
                {item.fileName}</a>}</Description>));
        const columns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.code',
                    defaultMessage: '单据编号'
                }),
                dataIndex: 'code',
                width: 200,
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.vin',
                    defaultMessage: 'VIN'
                }),
                dataIndex: 'vin',
                width: 160,
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.productCategoryCode',
                    defaultMessage: '车型'
                }),
                dataIndex: 'productCategoryCode',
                width: 150,
                render: text => <span title={text}><Ellipsis length={20}>{text}</Ellipsis></span>
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.partCode',
                    defaultMessage: '备件编号'
                }),
                dataIndex: 'partCode',
                width: languageIntl === 'pt-PT' ? 260 : 195,
                render: text => <span title={text}><Ellipsis length={20}>{text}</Ellipsis></span>
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.partName',
                    defaultMessage: '备件名称'
                }),
                dataIndex: 'partName',
                width: 280,
                render: text => <span title={text}><Ellipsis length={28}>{text}</Ellipsis></span>
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.isCaused',
                    defaultMessage: '是否主损件'
                }),
                dataIndex: 'isCaused',
                width: 280,
                render: text => text ? 'Y' : 'N'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.quantity',
                    defaultMessage: '备件数量'
                }),
                dataIndex: 'quantity',
                className: styles.textAlign,
                width: 150,
                render: text => formatAmount(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.currency',
                    defaultMessage: ' 币种'
                }),
                dataIndex: 'currency',
                width: 120,
                render: text => conventEnumValueToString(currency, text)
            }
        ];
        if(!this.props.isMoneyVisible)
            columns.splice(7, 0,
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetail.column.price',
                        defaultMessage: '单价'
                    }),
                    dataIndex: 'price',
                    className: styles.textAlign,
                    width: 150,
                    render: text => formatAmount(text)
                },
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetail.column.materialFee',
                        defaultMessage: '材料费'
                    }),
                    dataIndex: 'materialFee',
                    className: styles.textAlign,
                    width: 150,
                    render: text => formatAmount(text)
                },
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetail.column.mgmtFee',
                        defaultMessage: '管理费'
                    }),
                    dataIndex: 'mgmtFee',
                    className: styles.textAlign,
                    width: 150,
                    render: text => formatAmount(text)
                },
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetail.column.laborFee',
                        defaultMessage: '工时费'
                    }),
                    dataIndex: 'laborFee',
                    className: styles.textAlign,
                    width: languageIntl === 'pt-PT' ? 190 : 120,
                    render: text => formatAmount(text)
                },
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetail.column.accessoryFee',
                        defaultMessage: '辅料费'
                    }),
                    dataIndex: 'accessoryFee',
                    className: styles.textAlign,
                    width: languageIntl === 'pt-PT' ? 180 : 120,
                    render: text => formatAmount(text)
                },
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetail.column.totalFee',
                        defaultMessage: '费用合计'
                    }),
                    dataIndex: 'totalFee',
                    width: 130,
                    sorter: true,
                    className: styles.textAlign,
                    render: text => formatAmount(text)
                });
        if(!this.props.isDealerUser) {
            columns.splice(9, 0,
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetail.column.mgmtFeeRate',
                        defaultMessage: '管理费率'
                    }),
                    dataIndex: 'mgmtFeeRate',
                    className: styles.textAlign,
                    width: 150,
                    render: text => formatPercent(text)
                });
            columns.splice(11, 0,
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetail.column.laborPrice',
                        defaultMessage: '工时单价'
                    }),
                    dataIndex: 'laborPrice',
                    className: styles.textAlign,
                    width: languageIntl === 'pt-PT' ? 190 : 120,
                    render: text => formatAmount(text)
                });
        }
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: selectedRowKeys => {
                this.setState({
                    selectedRowKeys
                });
            }
        };
        return (
            <div>
                {!this.props.isDealerUser &&
                    <Card>
                        <DescriptionList size="large" title={<Row><Col span={6}>{this.props.intl.formatMessage({
                            id: 'commonDetail.order.title',
                            defaultMessage: '结算单信息'
                        })}</Col>
                        <Col className={styles.optionBtn} span={18}>{this.props.operations}</Col></Row>}>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.code',
                                    defaultMessage: '结算单号'
                                })}>
                                {this.props.detail.code}
                            </Description>
                            {this.props.isDealerUser ? null
                                : <Description
                                    term={this.props.intl.formatMessage({
                                        id: 'commonDetail.info.dealerCode',
                                        defaultMessage: '总代'
                                    })}>
                                    {this.props.detail.dealerCode}
                                </Description>}
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.brand',
                                    defaultMessage: '品牌'
                                })}>
                                {`(${this.props.detail.brandCode})${this.props.detail.brandName}`}
                            </Description>
                            {!this.props.isMoneyVisible && <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.materialFee',
                                    defaultMessage: '材料费'
                                })}>
                                {formatAmount(this.props.detail.materialFee)}
                            </Description>}
                            {!this.props.isMoneyVisible &&
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.mgmtFee',
                                    defaultMessage: '配件管理费'
                                })}>
                                {formatAmount(this.props.detail.mgmtFee)}
                            </Description>}
                            {!this.props.isMoneyVisible &&
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.laborFee',
                                    defaultMessage: '工时费'
                                })}>
                                {formatAmount(this.props.detail.laborFee)}
                            </Description>}
                            {!this.props.isMoneyVisible &&
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.suppleMaterialFee',
                                    defaultMessage: '辅料费'
                                })}>
                                {formatAmount(this.props.detail.suppleMaterialFee)}
                            </Description>}
                            {/* <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.outFee',
                                    defaultMessage: '外出费用'
                                })}>
                                {formatAmount(this.props.detail.outFee)}
                            </Description> */}
                            {!this.props.isMoneyVisible &&
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.totalFee',
                                    defaultMessage: '费用合计'
                                })}>
                                {formatAmount(this.props.detail.totalFee)}
                            </Description>}
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.currency',
                                    defaultMessage: ' 币种'
                                })}>
                                {conventEnumValueToString(currency, this.props.detail.currency)}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.department',
                                    defaultMessage: '报销部门'
                                })}>
                                {this.props.detail.department}
                            </Description>
                        </DescriptionList>
                        <DescriptionList col={1} size="large">
                            <Description term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.remark',
                                defaultMessage: '备注'
                            })}>
                                {this.props.detail.remark}
                            </Description>
                        </DescriptionList>
                        {
                            !this.props.isDealerUser && this.props.isDetail ? <React.Fragment>
                                <Divider />
                                <DescriptionList size="large" title={this.props.intl.formatMessage({
                                    id: 'commonDetail.approveInfo.title',
                                    defaultMessage: '财务审核信息'
                                })}>
                                    <Description
                                        term={this.props.intl.formatMessage({
                                            id: 'commonDetail.info.financeApproverName',
                                            defaultMessage: '审核人'
                                        })}>
                                        {this.props.detail.financeApproverName}
                                    </Description>
                                    <Description
                                        term={this.props.intl.formatMessage({
                                            id: 'commonDetail.info.financeApproveTime',
                                            defaultMessage: '审核时间'
                                        })}>
                                        {formatDateTime(this.props.detail.financeApproveTime, DATETIME_FORMAT)}
                                    </Description>
                                </DescriptionList>
                                <DescriptionList col={1} size="large">
                                    <Description term={this.props.intl.formatMessage({
                                        id: 'commonDetail.info.financeApproveOpinion',
                                        defaultMessage: '审核意见'
                                    })}>
                                        {this.props.detail.financeApproveOpinion}
                                    </Description>
                                </DescriptionList>
                            </React.Fragment> : null
                        }
                    </Card>
                }
                <Card
                    title={<Row><Col span={6}>{this.props.intl.formatMessage({
                        id: 'commonDetail.order.title',
                        defaultMessage: '结算单信息'
                    })}
                    {this.state.isRepeat ? <Button
                        className={styles.selectRepeatBtn}
                        size="small"
                        onClick={this.onClickReductionBtn}>
                        {this.props.intl.formatMessage({
                            id: 'newPanel.operation.reduction',
                            defaultMessage: '还原'
                        })}
                    </Button> : <Button
                        className={styles.selectRepeatBtn}
                        size="small"
                        onClick={this.onClickRepeatBtn}>
                        {this.props.intl.formatMessage({
                            id: 'newPanel.operation.repeat',
                            defaultMessage: '查重'
                        })}
                    </Button>}</Col>
                    {this.props.isDealerUser && <Col className={styles.optionBtn} span={18}>{this.props.operations}</Col>}</Row>}>
                    <Table
                        className="white-space-nowrap"
                        rowKey="id"
                        columns={columns}
                        pagination={false}
                        dataSource={newdetails}
                        rowSelection={rowSelection}
                        // rowClassName={this.setRowClassName()}
                        scroll={{
                            x: 'max-content',
                            y: 430}}
                        size="small"
                        bordered={true}/>
                </Card>
                <Card
                    title={this.props.intl.formatMessage({
                        id: 'commonDetail.attachments.title',
                        defaultMessage: '附件清单'
                    })}
                    bordered={false}>
                    {fileList.length ? <DescriptionList col={1} size="large">
                        {fileList}
                    </DescriptionList> : this.props.intl.formatMessage({
                        id: 'commonDetail.attachments.noData',
                        defaultMessage: '暂无附件'
                    })}
                </Card>
            </div>
        );
    }
}

Detail.defaultProps = {
    detail: {},
    isDetail: false,
    isDealerUser: true,
    isMoneyVisible: false,
    showBrand: false,
};

Detail.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    isDealerUser: PropTypes.bool,
    isDetail: PropTypes.bool,
    isMoneyVisible: PropTypes.bool,
    operations: PropTypes.any,
    showBrand: PropTypes.bool
};
export default injectIntl(Detail);
